<template>
<div>
    <v-layout>
        <!-- 侧部导航栏 -->
        <v-navigation-drawer class="pt-4" color="grey-lighten-4" :rail="!drawer">
            <div class="flex justify-start flex-items-center">
                <img :class="drawer ? 'ml-5 mr-5' : 'ma'" :src="logo" alt="logo">
                <h2 v-if="drawer">{{ title }}</h2>
            </div>
            <div class="position-relative m-t-1">
                <v-avatar v-if="drawer" class="ma position-absolute z-100 left-40% top--6" size="55"
                    color="surface-variant" :image="logo"></v-avatar>
                <v-list density="compact" nav
                    class="mt-10 pt-13  border-rd-5! shadow-[-1px_3px_20px_rgba(0,0,0,0.1)]! p-4 ">
                    <v-list-item v-for="item in navigationBars" :key="item.title" :prepend-icon="item.icon"
                        append-icon="mdi-chevron-right" :title="item.title" :to="item.path"></v-list-item>
                </v-list>
            </div>
        </v-navigation-drawer>
        <!-- 头部应用栏 -->
        <v-app-bar>
            <v-app-bar-nav-icon @click="drawer = !drawer"></v-app-bar-nav-icon>
            <template v-slot:append>
                <v-tooltip text="github" location="bottom">
                    <template v-slot:activator="{ props }">
                        <v-btn v-bind="props" icon="mdi-github"></v-btn>
                    </template>
                </v-tooltip>
                <!-- 下拉菜单 -->
                <v-speed-dial location="bottom center" transition="scale-transition">
                    <template v-slot:activator="{ props: activatorProps }">
                        <v-btn v-bind="activatorProps" size="large" icon="mdi-cog"></v-btn>
                    </template>
                    <v-tooltip text="退出" location="start">
                        <template v-slot:activator="{ props }">
                            <v-btn v-bind="props" key="1" icon="mdi-logout" @click="logout"> </v-btn>
                        </template>
                    </v-tooltip>
                </v-speed-dial>
            </template>
        </v-app-bar>
        <!-- main -->
        <v-main>
            <v-container>
                <v-row>
                    <v-col>
                        <h2>{{ route.meta.title }}</h2>
                    </v-col>
                    <v-col cols="2" offset="7">
                        <div class="flex justify-center">
                            <v-icon :icon="route.meta.icon" color="primary"></v-icon>
                            <v-icon icon="mdi-chevron-right"></v-icon>
                            <span class="primary">{{ route.meta.title }}</span>
                        </div>
                    </v-col>
                </v-row>
                <router-view></router-view>
            </v-container>
        </v-main>
        <!-- footer -->
        <v-footer app class="block!">
            <v-card class="bg-white">
                <v-container>
                    <v-row class="text-left">
                        <v-col>{{ title }} 中国 2023</v-col>
                    </v-row>
                </v-container>
            </v-card>
        </v-footer>
    </v-layout>
</div>
</template>

<script setup>
import logo from '/logo.svg'
// data
const title = import.meta.env.VITE_APP_NAME
const drawer = ref(true)
const router = useRouter()
const route = useRoute()
const navigationBars = ref([
    {
        title: '演示',
        icon: 'mdi-clipboard-minus-outline',
        path: '/home/demo'
    }])

onMounted(() => {

});
// methods
function logout() {
    router.push('/login')
}
</script>
